<template>
  <div class="hello">
    <div class="hd">
      <div class="hdBack" style="text-align: center"><img width="55%" src="../assets/logo.png"/></div>
      <div class="hdTitle">首页</div>
      <div class="c"></div>
    </div>
    <div class="c hh"></div>
    <swiper  auto loop  >
      <swiper-item class="swiper-demo-img" v-for="(item, index) in dependencies" :key="index"><img :src="item"></swiper-item>
    </swiper>
    <div class="grid-center grid">
      <div class="gridItem">
        <img class="gridIcon" src="../assets/chaoshishengxian.png"/>
        <div>新鲜海味</div>
      </div>
      <div class="gridItem">
        <img class="gridIcon" src="../assets/woman.png"/>
        <div>靓丽女装</div>
      </div>
      <div class="gridItem">
        <img class="gridIcon" src="../assets/lingshihongbei.png"/>
        <div>美味甜点</div>
      </div>
      <div class="gridItem">
        <img class="gridIcon" src="../assets/xianxianguoshu.png"/>
        <div>优惠特卖</div>
      </div>
      <div class="gridItem">
        <img class="gridIcon" src="../assets/moreIcon.png"/>
        <div>更多</div>
      </div>
      <div class="c"></div>
    </div>

    <div class="cm">
      <div class="hrM"></div>
      <div @click="hotMore(0)" class="cmTitle cmHot cm0">
        <img class="cmTitleIcon"  src="../assets/hotIcon.png"/>
        <span>热门精选</span>
      </div>
      <div class="veView">
        <ul class="veViewM">
          <li class="veViewLi ">
            <img slot="icon" src="../assets/04_watch.png">
            <div class="veViewTitle">智能手表，手机的缩减版，可通话，可检测身体状态，运动情况，智能家居</div>
            <div class="veViewPrice">￥ 22.00</div>
          </li>
          <li class="veViewLi">
            <img slot="icon" src="../assets/05_Camera.png">
            <div class="veViewTitle">摇头机，智能摄像头，360度无死角，监控更全方位，高清视频流，观看从不卡顿</div>
            <div class="veViewPrice">￥ 650.00</div>
          </li>
          <li class="veViewLi ">
            <img slot="icon" src="../assets/01_pet.png">
            <div class="veViewTitle">宠物喂食器，定时定量可控制，视频实时直播，观察宠物状态，科学喂养</div>
            <div class="veViewPrice">￥ 3200.00</div>
          </li>
          <li class="veViewLi">
            <img slot="icon" src="../assets/02_Healthpot.png">
            <div class="veViewTitle">养生茶壶，可煲粥可煮茶，多功能的智能家居用品，手机遥控控制</div>
            <div class="veViewPrice">￥ 122.00</div>
          </li>
          <div class="c"></div>
        </ul>
        <div class="c"></div>
      </div>
      <div class="hrM"></div>
      <div @click="hotMore(1)" class="cmTitle cm1">
        <img class="cmTitleIcon"  src="../assets/priceIcon.png"/>
        <span>实时优惠</span>
      </div>
      <div class="veView">
        <ul class="veViewM">
          <li class="veViewLi ">
            <img slot="icon" src="../assets/06_Lock.png">
            <div class="veViewTitle">蓝牙门锁，指纹，ICP卡，身份证，APP多渠道可开门，同时更注重对安全的把关</div>
            <div class="veViewPrice">￥ 1922.00</div>
          </li>
          <li class="veViewLi">
            <img slot="icon" src="../assets/03_Oven.png">
            <div class="veViewTitle">智能烤箱，不烤焦，定时可控，为你美味的食品保驾护航</div>
            <div class="veViewPrice">￥ 2182.00</div>
          </li>
          <li class="veViewLi ">
            <img slot="icon" src="../assets/01_pet.png">
            <div class="veViewTitle">宠物喂食器，定时定量可控制，视频实时直播，观察宠物状态，科学喂养</div>
            <div class="veViewPrice">￥ 566.00</div>
          </li>
          <li @click="toProductDetails" class="veViewLi">
            <img slot="icon" src="../assets/02_Healthpot.png">
            <div class="veViewTitle">养生茶壶，可煲粥可煮茶，多功能的智能家居用品，手机遥控控制</div>
            <div class="veViewPrice">￥ 850.00</div>
          </li>
          <div class="c"></div>
        </ul>
        <div class="c"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import { Swiper, SwiperItem, Grid, GridItem, Search } from 'vux'
  // import URL from '../data/package.json'
  export default {
    name: 'hello',
    components: {
      Swiper,
      SwiperItem,
      Grid,
      GridItem,
      Search
    },
    data () {
      return {
        msg: '',
        dependencies: ['https://static.vux.li/demo/1.jpg', 'https://static.vux.li/demo/2.jpg', 'https://static.vux.li/demo/3.jpg']
      }
    },
    mounted () {
      this.$nextTick(function () {
        let position = localStorage.getItem('SAVE_POSITION')
        document.body.scrollTop = parseInt(position) + parseInt(45)
      })
    },
    created () {
      // this.swiperImg()
    },
    beforeDestroy () {
      // localStorage.removeItem('SAVE_POSITION')
    },
    methods: {
      hotMore (num) {
        let pathUrl = '/text/' + num
        this.$router.push({ path: pathUrl })
        let mTop = document.body.scrollTop
        localStorage.setItem('SAVE_POSITION', mTop)
      },
      toProductDetails () {
        this.$router.push({ path: '/productDetails' })
        let mTop = document.body.scrollTop
        localStorage.setItem('SAVE_POSITION', mTop)
      }
    }
  }
</script>
<style scoped lang="sass">
  @import '../css/index.scss';
</style>
